<template>
    <div class="container mCom" id="mCom" style="background:#fff">
        <div class="search-box">
        <div class="btn">
            
        </div>
        <div class="search">
            <el-input size="medium" clearable v-model="paginationModel.modelName"  @keyup.enter.native="handleSearch" style="width: 240px; margin-right: 10px" placeholder="模型名称"></el-input>
            <el-button size="medium" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        </div>
       </div>
       <div style="height:800px">
       <el-table
      v-loading="loadingModel"
       :header-cell-style="{background:'#F5F5F5'}"
      :data="DataModelList"
       max-height="600"
      :cell-style="{padding: '10px'}"
      border
    >
      <el-table-column label="序号" align="center" type="index" width="60"/>
      <el-table-column label="模型名称" align="center" prop="modelName" />
      <el-table-column
        label="所选算法"
        align="center"
        prop="modelAlgo"
      />
      <el-table-column
        label="所属工程"
        align="center"
        prop="projectName"
      />
      <el-table-column
        label="所属平台"
        align="center"
        prop="platform"
      />
      <el-table-column
        label="IP地址"
        align="center"
        prop="ip"
      />
      <el-table-column
        label="模型类型"
        align="center"
        prop="modelType"
      />
      <el-table-column
        label="所选数据集名称"
        align="center"
        prop="dataSetName"
      />
      <el-table-column
        label="创建时间"
        align="center"
        prop=""
      >
      <template slot-scope="scope">
          {{parseTimeToDate(scope.row.createTime)}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleDownload(scope.row)"
            >下载</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-copy-document"
            @click="handleDeploy(scope.row)"
            >部署</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagesize">
      <div id="fy" class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="paginationModel.pageNumber" :page-sizes="[10, 20, 30, 50]"
        :page-size="paginationModel.pageSize" layout="total, sizes, prev, pager, next"
        :total="total"></el-pagination>
      </div>
    </div>
    </div>
    <el-dialog title="部署" :visible.sync="openDeploy" width="600px" append-to-body>
      <el-form ref="form" :model="formDeploy" :rules="rules" label-width="110px">
        <el-form-item label="部署方式：" prop="type">
          
          <el-select v-model="formDeploy.type" placeholder="请选择部署方式">
            <el-option v-for="item in dataType" :key="item.id" :value="item.type" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部署地址：" prop="ip" >
          <el-input
            maxlength="20"
            v-model="formDeploy.ip"
            placeholder="请输入服务器ip地址"
          />
        </el-form-item>
        <template v-if="formDeploy.type =='origin'">
          <el-form-item label="服务器端口：" prop="port">
          <el-input
            maxlength="20"
            v-model="formDeploy.port"
            placeholder="默认22"
          />
        </el-form-item>
        <el-form-item label="用户：" prop="userName">
          <el-input
            maxlength="20"
            v-model="formDeploy.userName"
            placeholder="请输入用户名"
          />
        </el-form-item>
        <el-form-item label="密码：" prop="passWord">
          <el-input
            maxlength="20"
            v-model="formDeploy.passWord"
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item label="上传目录：" prop="directoryPath">
          <el-input
            maxlength="20"
            v-model="formDeploy.directoryPath"
            placeholder="请输入上传目录"
          />
        </el-form-item>
        </template>

      
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="submitForm">部 署</el-button>
        <el-button size="medium" @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    </div>
</template>
<script>
import {
  getModelList,
  completeVerification,
  completeDownload,
  completeDploy,
  modelSearch
} from "../../api/sourceDetail";
export default {
  name: "modelMan",
  data() {
    let validatePort = (rule, value, callback) => {
      let reg = /^(([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5]))$/;
      if (value === "") {
        callback(new Error("请输入端口号"));
      } else if (reg.test(value) === false) {
        return callback(new Error("请输入正确的端口号"));
      } else {
        callback();
      }
    };
    return {
      paginationModel: {
        name: "",
        pageSize: 10,
        pageNumber: 1
      },
      formDeploy: {
        type: "",
        ip: "",
        port: "",
        userName: "",
        passWord: "",
        directoryPath: "",
        projectId: ""
      },
      loadingModel: false,
      DataModelList: [],
      dataType: [
        { id: 1, name: "本地", type: "local" },
        { id: 2, name: "远程", type: "origin" }
      ],
      openDeploy: false,
      rules: {
        type: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ],
        ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        passWord: [{ required: true, message: "请输入密码", trigger: "blur" }],
        directoryPath: [
          { required: true, message: "请输入上传目录", trigger: "blur" }
        ]
      },
      total: 0
    };
  },
  created() {
    this.GET_tableModelList();
  },
  methods: {
    // 搜索
    handleSearch() {
      modelSearch(this.paginationModel).then(res => {
        this.DataModelList = res.data.content;
        this.total = res.data.totalElements;
      });
    },
    handleCurrentChange(val) {
      this.paginationModel.pageNumber = val;
      this.GET_tableModelList();
    },
    handleSizeChange(val) {
      this.paginationModel.pageSize = val;
      this.handleSearch();
    },
    reForm() {
      this.formDeploy = {};
    },
    handleDeploy(row) {
      this.openDeploy = true;
      this.formDeploy.projectId = row.modelId;
    },
    // 下载
    handleDownload(item) {
      completeVerification(item.modelId).then(res => {
        if (res.status == "SUCCESS") {
          completeDownload(item.modelId).then(res => {
            var blob = new Blob([res], {
              type: "application/zip;charset-UTF-8"
            });
            const blobUrl = URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.style.display = "none";
            a.href = blobUrl;
            a.download = new Date().getTime() + ".zip";
            a.click();
            URL.revokeObjectURL(blobUrl); // 释放内存
          });
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 部署
    submitForm() {
      this.$refs.form.validate(val => {
        if (val) {
          completeVerification(this.formDeploy.projectId).then(res => {
            if (res.status == "SUCCESS") {
              if (this.formDeploy.port == "") {
                this.formDeploy.port = 22;
              }
              completeDploy(this.formDeploy).then(res => {
                this.$message.success(res.message);
                this.cancel();
              });
            } else {
              this.$message.error(res.message);
            }
          });
        }
      });
    },
    // 取消
    cancel() {
      this.reForm();
      this.openDeploy = false;
      this.$refs.form.resetFields();
    },
    // 获取表格数据
    GET_tableModelList() {
      this.loadingModel = true;
      getModelList(this.paginationModel)
        .then(res => {
          this.DataModelList = res.data.content;
          this.total = res.data.totalElements;
          this.loadingModel = false;
        })
        .catch(e => {
          this.loadingModel = false;
        });
    },
    parseTimeToDate: function(timeStep) {
      //将时间戳转成yyyy-mm-dd hh:mm:ss
      if (timeStep == null || timeStep == "" || timeStep == 0) {
        return null;
      }
      var time = new Date(timeStep);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y +
        "-" +
        this.addNum(m) +
        "-" +
        this.addNum(d) +
        " " +
        this.addNum(h) +
        ":" +
        this.addNum(mm) +
        ":" +
        this.addNum(s)
      );
    },
    addNum: function(m) {
      return m < 10 ? "0" + m : m;
    }
  }
};
</script>
<style scoped>
.container .search-box {
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
}
</style>
